<template>
  <div class="items">
    <el-row>
      <el-col :span="8">
        <el-input placeholder="搜索" v-model.trim="search.value">
          <el-select v-model.trim="search.type" slot="prepend" style="width: 150px">
            <el-option label="请选择" :value="0"></el-option>
            <el-option label="用户名" :value="1"></el-option>
            <el-option label="用户昵称" :value="2"></el-option>
            <el-option label="用户手机号码" :value="3"></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-close"
            @click="clearSearch"
            v-if="search.type && search.value"></el-button>
          <el-button slot="append" icon="el-icon-search" @click="searchAction">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="items"
      style="width: 100%;margin-top: 1rem">
      <el-table-column
        width="100px"
        label="头像">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar && scope.row.avatar.indexOf('http') === 0" :src="scope.row.avatar"  style="width: 50px;height: 50px"/>
          <img v-else-if="scope.row.avatar && scope.row.avatar.indexOf('http') < 0" :src="imageUrl + scope.row.avatar"   style="width: 50px;height: 50px"/>
          <img v-else :src="require('@assets/defaultAvatar.jpg')" style="width: 50px;height: 50px"/>
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        label="用户名">
        <template slot-scope="scope">
          {{scope.row.username}}
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        label="昵称">
        <template slot-scope="scope">
          {{scope.row.nickname}}
        </template>
      </el-table-column>
      <el-table-column
        label="手机号">
        <template slot-scope="scope">
          {{scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column
        label="性别">
        <template slot-scope="scope">
          {{sexText[scope.row.sex]}}
        </template>
      </el-table-column>
      <el-table-column
        label="注册时间">
        <template slot-scope="scope">
          {{scope.row.create_date}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="actionUid = scope.row.uid;resetPassword()"
            size="little">重置登录密码</el-button>
          <el-button
            @click="actionUid = scope.row.uid; resetMobile()"
            size="little">重置手机号</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pages">
      <el-pagination
        background
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      actionUid: 0,
      loading: false,
      sexText: {
        0: '未知',
        1: '男',
        2: '女'
      },
      page: 1,
      size: 15,
      total: 0,
      items: [],
      search: {
        type: 0,
        value: ''
      }
    }
  },
  watch: {
    $route (route) {
      if (route.params.page) {
        this.page = Number(route.params.page)
      }
      console.log(this.page)
      this.getItems()
    }
  },
  methods: {
    /**
     * 重置手机号
     */
    resetMobile () {
      /* eslint-disable */
      this.$prompt('请输入手机号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
        inputErrorMessage: '手机号码格式错误'
      }).then(({ value }) => {
        this.showLoading()
        this
          .$api
          .member
          .resetMobile(value, this.actionUid)
          .then(r => {
            this.toast('密码重置成功')
            this.getItems()
          })
      }).catch(() => {});
      /* eslint-enable */
    },
    /**
     * 重置密码
     */
    resetPassword () {
      /* eslint-disable */
      this.$prompt('密码应该在6位数以上，并且由字母与数字组合而成,不区分大小写', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[a-zA-Z0-9\.\-\_]{6,}$/,
        inputErrorMessage: '密码格式错误'
      }).then(({ value }) => {
        this.showLoading()
        this
          .$api
          .member
          .resetPassword(value, this.actionUid)
          .then(r => {
            this.toast('密码重置成功')
          })
      }).catch(() => {});
      /* eslint-enable */
    },
    /**
     *  搜索
     */
    clearSearch () {
      this.search = {
        type: 0,
        value: ''
      }
      this.page = 1
      this.getItems()
    },
    /**
     *  搜索
     */
    searchAction () {
      switch (this.search.type) {
        case 0:
          this.toast('请选择搜索类型', 'warning')
          return false
        case 1:
          if (!this.search.value) {
            this.toast('请输入要搜索的用户登录名', 'warning')
            return false
          }
          break
        case 2:
          if (!this.search.value) {
            this.toast('请输入要搜索的用户昵称', 'warning')
            return false
          }
          break
        case 3:
          if (!this.search.value) {
            this.toast('请输入用户手机号码', 'warning')
            return false
          }
          break
      }
      this.page = 1
      this.getItems()
    },
    /**
     *  翻页回调
     */
    currentPage (page) {
      this.jump({
        name: 'member.manager.items',
        params: {
          page: page
        }
      })
    },
    /**
     * @purpose 获取账单列表
     */
    getItems () {
      this.loading = true
      this
        .$api
        .member
        .items({
          page: this.page,
          size: this.size,
          searchType: this.search.type,
          searchValue: this.search.value
        })
        .then(r => {
          this.loading = false
          this.total = r.total
          this.items = r.list
        })
        .catch(e => {
          this.loading = false
        })
    }
  },
  created () {
    if (this.$route.params.page) {
      this.page = Number(this.$route.params.page)
    }
    console.log(this.page)
    this.getItems()
  }
}
</script>
<style scoped lang="sass">
  .items
    width: 100%
    min-height: 100%
    .el-pagination
      padding: 2px 0 !important
</style>
